<template>
<el-container>
  <div >

      <div style="">
        <h1>欢迎来到黄同学的图库</h1>
         <h4>我只收纳高质量的图片</h4>
      </div>
      <!-- action="http://139.186.148.40:9001/myimage/image/saveImage/时间/美女" -->
      <div>
        <el-row :gutter="20">
          <el-col :span="12"   v-loading="UploadFlag" element-loading-text="文件上传中">
            <div class="grid-content bg-purple">
              <el-upload
                class="upload-demo"
                ref="upload"
                :on-success="successUpload"
                :action="uploadAPI"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :auto-upload="false"
                :on-error="errorUpload"
                :on-progress="uploadProgress"
                :on-change="changeFile"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
               
                <el-button
                
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  :disabled="UploadFlag"
                  @click="submitUpload"
                  >上传到服务器</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过100M
                </div>
              </el-upload>
            </div>
            <div>
              <el-input v-model="imgTitle" placeholder="请输入新颖的图片标题 "  clearable>
              </el-input>
            </div>
            <br />
            <div> 
              <el-select v-model="tag1" filterable clearable  placeholder="图片标签1 可搜索">
                <el-option
                  v-for="item in tagList"
                  :key="item.tag"
                  :label="item.label"
                  :value="item.tag"
                  :disabled="item.tag === tag2"
                >
                </el-option>
              </el-select>

              <el-select v-model="tag2" filterable clearable placeholder="图片标签2 可搜索">
                <el-option
                  v-for="item in tagList"
                  :key="item.tag"
                  :label="item.label"
                  :value="item.tag"
                  :disabled="item.tag === tag1"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div>
                <div>
                  <br />
                  搜索图片
                  <br />
                </div>
                <el-row> </el-row>
                <div class="m-padding-top">
                  <el-input
                    placeholder="根据标题搜索图片..."
                    v-model="searchTitle"
                    clearable
                  >
                  </el-input>
                </div>
                <div class="m-padding-top">
                  <el-input
                    placeholder="根据标签搜索图片..."
                    v-model="searchtagName"
                    clearable
                  >
                  </el-input>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="2">
            <div class="grid-content bg-purple">
              <div>
                <el-row> </el-row>
                <div class="m-padding-top">
                  <br />
                  <br />
                  <el-button type="primary" round v-on:click="searchImgByTitle()"
                    >标题搜索</el-button
                  >

                  <br />
                  <br />
                  <el-button type="success" round v-on:click="searchImgBytag()"
                    >标签搜索</el-button
                  >
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

    <el-backtop  :bottom="100" >
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
        border-radius:20px;
      }"
    >
     UP
    </div>
  </el-backtop>
  </div>
 
    
<el-header>

</el-header>


<el-main>
  <div class="bg">
     
     <el-menu  class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" v-on:click=" getImgInfoPage()">首页</el-menu-item>
        <el-menu-item index="2"  v-on:click="searchPhoto()">摄影</el-menu-item>
         <el-menu-item index="3"  v-on:click="searchTravel()">旅行</el-menu-item>
     </el-menu>

     <el-empty v-show="emptyShow" description="查找不到你需要的图片"></el-empty>
      <table>
    
            <tr v-for="(row, index) in sliceList(this.ImgInfo, 3)" :key="index">
              <td v-for="(item, i) in row" :key="i">
                <div>
                    <span class="demonstration">{{item.imgtitle}}</span>  <el-button type="danger" icon="el-icon-delete" circle size="mini" v-on:click="deleteImg(item.id)"> </el-button>
                </div>
              
                <el-image
                  style="width: 405px; height: 350px;padding-left: 1em;padding-bottom: 1em"
                  :src="item.imgadress"
                  :preview-src-list="listAdress"
                  :lazy="true"
                
                >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
                </el-image>

            
              </td>
            </tr>
      </table>


      <!-- 分页 -->
      <div v-show="allImgShow">
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center"
          layout="total, prev, pager, next, jumper"
          @current-change="getImgInfoPage"
        />
      </div>

      <!-- 标签搜索分页 -->
      <div v-show="searchBytagShow">
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center"
          layout="total, prev, pager, next, jumper"
          @current-change="searchImgBytag"
        />
      </div>
      <!-- 标题搜索分页 -->
      <div v-show="searchByTitleShow">
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center"
          layout="total, prev, pager, next, jumper"
          @current-change="searchImgByTitle"
        />
      </div>
      <!-- 旅行搜索分页 -->
      <div v-show="searchByTravelShow">
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center"
          layout="total, prev, pager, next, jumper"
          @current-change="searchTravel"
        />
      </div>
      <!-- 摄影搜索分页 -->
      <div v-show="searchByPhotoShow">
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center"
          layout="total, prev, pager, next, jumper"
          @current-change="searchPhoto"
        />
      </div>

      <!-- 1111111111111
      <button v-on:click="getImgInfoPage">1111</button> -->

      
    
      
        <!-- <v-gallery :images="info.imgadress"  >
    </v-gallery> -->
      
          <!-- <viewer  >
          <img v-for="item in ImgInfo" :src="item.imgadress"  >
      </viewer> -->

        
      
    
    </div>
</el-main>
</el-container>

  
</template>

<script>
import MyImage from "@/api/image";
export default {
  data() {
    return {
      ImgInfo: {
        imgadress:"",
        imgtitle: "",
      },
      tagList: {
        tag: "",
      },
      page: 1, //当前页
      limit: 12, //每页记录数
      total: 0,
      records: {
        imgadress: "",
      },
      searchtagName: "",
      tag1: "",
      tag2: "",
      uploadAPI: "",
      imgTitle: "",
      searchTitle: "",
      allImgShow: false,
      searchBytagShow: false,
      searchByTitleShow: false,
      searchByPhotoShow:false,
      searchByTravelShow:false,
      listAdress: [],
      fileFlag:"",
      emptyShow:false,
      UploadFlag:false,
      testFlag:""
     
    };
  },
  watch: {
    tag1() {
      this.uploadAPI =
        "http://139.186.148.40:9001/myimage/image/saveImage/" +
        this.imgTitle +
        "/" +
        "tagName=" +
        this.tag1 +
        "&" +
        "tagName2=" +
        this.tag2;
    },
    tag2() {
      this.uploadAPI =
        "http://139.186.148.40:9001/myimage/image/saveImage/" +
        this.imgTitle +
        "/" +
        "tagName=" +
        this.tag1 +
        "&" +
        "tagName2=" +
        this.tag2;
    },
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getImgInfoPage();
    this.getTagInfo();
  },
  methods: {
    searchTravel(page=1){
      this.page = page;
      var textTravel="旅行"
      MyImage.searchImgBytag(textTravel, this.page, this.limit)
        .then((response) => {
          
          this.searchByPhotoShow=false;
          this.emptyShow=false
          this.searchByTitleShow = false;
          this.allImgShow = false;
          this.searchBytagShow = false;
          this.searchByTravelShow=true;
          this.total = response.data.total;
          this.ImgInfo = response.data.data;
         
          if( this.total==0){
             this.emptyShow=true
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: "所要查找的图片不存在",
            type: "error",
          });
        });
    
    },
    searchPhoto(page=1){
      this.page = page;
      var textPhoto="摄影"
      MyImage.searchImgBytag(textPhoto, this.page, this.limit)
        .then((response) => {
          this.searchByPhotoShow=true;
          this.searchByTravelShow=false;
          this.emptyShow=false
          this.searchByTitleShow = false;
          this.allImgShow = false;
          this.total = response.data.total;
          this.ImgInfo = response.data.data;
          this.searchBytagShow = false;
          if(this.total==0){
            this.emptyShow=true;
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: "所要查找的图片不存在",
            type: "error",
          });
        });
    },
    uploadProgress(){
      //alert("图片上传...")
       //this.fileFlag=""
    },
    changeFile(file){ 

       this.fileFlag="11"

    },
    errorUpload(){
        this.$message({
          showClose: true,
          message: "图片上传失败，请刷新后上传！",
          type: "error",
        });
        this.UploadFlag=false;
    },
    successUpload(response, file, fileList){
    
      this.$message({
            showClose: true,
            message: "图片上传成功",
            type: "success",
          });
       this.$refs.upload.clearFiles();
       //document.location.reload();
       this.UploadFlag=false;
       this.imgTitle="";
       this.getImgInfoPage();     
    },
    submitUpload() {
      //获取文件
      var files = this.$refs.upload.uploadFiles
     
      if(files.length==0){
          this.$message({
            showClose: true,
            message: "选择上传图片",
            type: "error",
          });
      }else if(this.imgTitle==''){
          this.$message({
            showClose: true,
            message: "请输入图片标题",
            type: "error",
          });

      }else if(this.tag1=='' ||this.tag2=='' ){
          this.$message({
            showClose: true,
            message: "请输入图片标签",
            type: "error",
          });
      } else{
        this.UploadFlag=true;
        this.$refs.upload.submit();
      }
     
    
     
    
    },
    handleRemove(file, fileList) {
      this.fileFlag="";
      console.log(file, fileList);
    },
    handlePreview(file) {
      //alert(file)
      this.file=file
      console.log(file);
    },
    searchImgByTitle(page = 1) {
      this.page = page;
      if(this.searchTitle==''){
        this.getImgInfoPage();
      }else{
       MyImage.searchByTitle(this.searchTitle, this.page, this.limit)
        .then((response) => {
          this.searchByTravelShow=false;
          this.searchByPhotoShow=false;
          this.emptyShow=false
          this.searchBytagShow = false;
          this.allImgShow = false;
          this.total = response.data.total;
          this.ImgInfo = response.data.records;
          this.searchByTitleShow = true;
          if(this.total==0){
            this.emptyShow=true
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: "所要查找的图片不存在",
            type: "error",
          });
        });
      }
     
    },
    deleteImg(imgId) {
      this.$confirm("确定要删除吗？此删除不可逆")
        .then((_) => {
          this.$prompt('请输入密码', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          if(value=='.'){
             MyImage.deleteImg(imgId).then((response) => {
              this.$message({
              showClose: true,
              message: "删除成功！",
              type: "success",
             });
             this.getImgInfoPage();
            //document.location.reload();
            });
          }else{
            this.$message({
              type: 'error',
              showClose: true,
              message: '密码输入错误！' 
            });
          }
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });       
        });
        
        })
        .catch((_) => {});
    },
    searchImgBytag(page = 1) {
      this.page = page;
      if(this.searchtagName==''){
        this.getImgInfoPage();
      }else{
         MyImage.searchImgBytag(this.searchtagName, this.page, this.limit)
        .then((response) => {
          this.searchByTravelShow=false;
          this.searchByPhotoShow=false;
          this.emptyShow=false
          this.searchByTitleShow = false;
          this.allImgShow = false;
          this.total = response.data.total;
          this.ImgInfo = response.data.data;
          this.searchBytagShow = true;
          if(this.total==0){
            this.emptyShow=true
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: "所要查找的图片不存在",
            type: "error",
          });
        });
      }
     
    },

    getImgInfoPage(page = 1) {
      this.page = page;
      MyImage.showImgInfoPage(this.page, this.limit).then((response) => {
        this.searchByTravelShow=false;
        this.searchByPhotoShow=false;
        this.emptyShow=false
        this.searchBytagShow = false;
        this.searchByTitleShow = false;
        this.total = response.data.total;
        this.ImgInfo = response.data.records;
        this.listAdress=response.data.listAdress;
        this.allImgShow = true;
        if(this.total==0){
          this.emptyShow=true
        }
      });
    },
    getTagInfo() {
      MyImage.showTag().then((response) => {
        this.tagList = response.data.tagList;
      });
    },
  },
  computed: {
    sliceList() {
      return function (data, count) {
        if (data != undefined) {
          let index = 0;
          let arrTemp = [];
          for (let i = 0; i < data.length; i++) {
            index = parseInt(i / count);
            if (arrTemp.length <= index) {
              arrTemp.push([]);
            }
            arrTemp[index].push(data[i]);
          }
          return arrTemp;
        }
      };
    },
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-family: "Courier New", Courier, monospace;
  font-size: 2em;
}
h4 {
  font-family: "Courier New", Courier, monospace;
  font-size:1em;
}
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.m-padding-top {
  padding-top: 1em;
}
.m-bg1{
  background:url(../../static/img/bj2.jpg)  no-repeat center center;
  background-size:cover;
  background-attachment:fixed;
  background-color:#f7f0f0;
  opacity: 0.5; 
}
</style>
